<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全部商品分类</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./sass/index.min.css">
    <link rel="stylesheet" href="./sass/list.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2708812_d1142so2yne.css">
    <script src="https://at.alicdn.com/t/font_2708812_shl5yzs14v.js"></script>
    <link rel="icon" href="./favicon.ico">
</head>

<body>
    <!-- 快捷导航模块 start -->
    <section class="shortcut">
        <div class="w">
            <div class="sl l">
                <a href="./mi.html">小米商城</a><span class="sep">|</span>
                <a href="#">MIUI</a><span class="sep">|</span>
                <a href="#">米聊</a><span class="sep">|</span>
                <a href="#">游戏</a><span class="sep">|</span>
                <a href="#">多看阅读</a><span class="sep">|</span>
                <a href="#">云服务</a><span class="sep">|</span>
                <a href="#">金融</a><span class="sep">|</span>
                <a href="#">小米商城移动版</a><span class="sep">|</span>
                <a href="#">问题反馈</a><span class="sep">|</span>
                <a href="#">SelectRegion</a>
            </div>
            <div class="sr r">
                <div class="shopcar r">
                    <a href="./cart.html" target="_blank"> 购物车<span>(0)</span></a>
                </div>
                <div class="regsiter r">
                    <a href="./login.html">登录</a><span class="sep">|</span>
                    <a href="./register.html">注册</a><span class="sep">|</span>
                    <a href="#">消息通知</a>
                </div>
            </div>
        </div>
    </section>
    <!-- 快捷导航模块 end -->

    <!-- header头部模块制作 start -->
    <header class="head">
        <div class="w">
            <div class="logo l">
                <a href="./mi.html" title="小米商城" class="nav_logo"></a>
            </div>
            <div class="nav l">
                <ul>
                    <li>
                        <a href="#">小米手机</a>
                        <div class="submenu">
                            <ul>
                                <li>
                                    <img src="./images/er_2.webp" alt="">
                                    <p>Xiaomi Civi</p>
                                    <span>2599元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_2.webp" alt="">
                                    <p>Xiaomi Civi</p>
                                    <span>2599元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_2.webp" alt="">
                                    <p>Xiaomi Civi</p>
                                    <span>2599元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_2.webp" alt="">
                                    <p>Xiaomi Civi</p>
                                    <span>2599元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_2.webp" alt="">
                                    <p>Xiaomi Civi</p>
                                    <span>2599元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_2.webp" alt="" class="nth">
                                    <p>Xiaomi Civi</p>
                                    <span>2599元起</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">红米</a>
                        <div class="submenu">
                            <ul>
                                <li>
                                    <img src="./images/er_1.webp" alt="">
                                    <p>红米k40 游戏增强版</p>
                                    <span>1799元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_1.webp" alt="">
                                    <p>红米k40 游戏增强版</p>
                                    <span>1799元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_1.webp" alt="">
                                    <p>红米k40 游戏增强版</p>
                                    <span>1799元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_1.webp" alt="">
                                    <p>红米k40 游戏增强版</p>
                                    <span>1799元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_1.webp" alt="">
                                    <p>红米k40 游戏增强版</p>
                                    <span>1799元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_1.webp" alt="" class="nth">
                                    <p>红米k40 游戏增强版</p>
                                    <span>1799元起</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">平板·笔记本</a>
                        <div class="submenu">
                            <ul>
                                <li>
                                    <img src="./images/er_3.webp" alt="">
                                    <p>小米笔记本 Pro 14 锐龙版</p>
                                    <span>5499 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_3.webp" alt="">
                                    <p>小米笔记本 Pro 14 锐龙版</p>
                                    <span>5499 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_3.webp" alt="">
                                    <p>小米笔记本 Pro 14 锐龙版</p>
                                    <span>5499 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_3.webp" alt="">
                                    <p>小米笔记本 Pro 14 锐龙版</p>
                                    <span>5499 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_3.webp" alt="">
                                    <p>小米笔记本 Pro 14 锐龙版</p>
                                    <span>5499 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_3.webp" alt="" class="nth">
                                    <p>小米笔记本 Pro 14 锐龙版</p>
                                    <span>5499 元起</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">电视</a>
                        <div class="submenu">
                            <ul>
                                <li>
                                    <img src="./images/er_4.webp" alt="">
                                    <p>小米电视6 65″OLED</p>
                                    <span>6999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_4.webp" alt="">
                                    <p>小米电视6 65″OLED</p>
                                    <span>6999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_4.webp" alt="">
                                    <p>小米电视6 65″OLED</p>
                                    <span>6999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_4.webp" alt="">
                                    <p>小米电视6 65″OLED</p>
                                    <span>6999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_4.webp" alt="">
                                    <p>小米电视6 65″OLED</p>
                                    <span>6999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_4.webp" alt="" class="nth">
                                    <p>小米电视6 65″OLED</p>
                                    <span>6999 元起</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">平板</a>
                        <div class="submenu">
                            <ul>
                                <li>
                                    <img src="./images/er_5.webp" alt="">
                                    <p>小米平板5</p>
                                    <span>1999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_5.webp" alt="">
                                    <p>小米平板5</p>
                                    <span>1999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_5.webp" alt="">
                                    <p>小米平板5</p>
                                    <span>1999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_5.webp" alt="">
                                    <p>小米平板5</p>
                                    <span>1999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_5.webp" alt="">
                                    <p>小米平板5</p>
                                    <span>1999 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_5.webp" alt="" class="nth">
                                    <p>小米平板5</p>
                                    <span>1999 元起</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">路由器</a>
                        <div class="submenu">
                            <ul>
                                <li>
                                    <img src="./images/er_6.webp" alt="">
                                    <p>小米路由器AX9000</p>
                                    <span>1299 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_6.webp" alt="">
                                    <p>小米路由器AX9000</p>
                                    <span>1299 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_6.webp" alt="">
                                    <p>小米路由器AX9000</p>
                                    <span>1299 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_6.webp" alt="">
                                    <p>小米路由器AX9000</p>
                                    <span>1299 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_6.webp" alt="">
                                    <p>小米路由器AX9000</p>
                                    <span>1299 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_6.webp" alt="" class="nth">
                                    <p>小米路由器AX9000</p>
                                    <span>1299 元起</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">智能硬件</a>
                        <div class="submenu">
                            <ul>
                                <li>
                                    <img src="./images/er_7.webp" alt="">
                                    <p>米家扫拖机器人1T</p>
                                    <span>1799 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_7.webp" alt="">
                                    <p>米家扫拖机器人1T</p>
                                    <span>1799 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_7.webp" alt="">
                                    <p>米家扫拖机器人1T</p>
                                    <span>1799 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_7.webp" alt="">
                                    <p>米家扫拖机器人1T</p>
                                    <span>1799 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_7.webp" alt="">
                                    <p>米家扫拖机器人1T</p>
                                    <span>1799 元起</span>
                                </li>
                                <li>
                                    <img src="./images/er_7.webp" alt="" class="nth">
                                    <p>米家扫拖机器人1T</p>
                                    <span>1799 元起</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="serch l">
                <div class="serch_bar cl">
                    <input type="text" class="serch_con" placeholder="红米k40 游戏增强版">
                    <button class="serch_btn"></button>
                    <!-- <ul class="serch_list">
                            <li>商品</li>
                            <li>商品</li>
                            <li>商品</li>
                            <li>商品</li>
                            <li>商品</li>
                            <li>商品</li>
                        </ul> -->
                </div>
            </div>

    </header>
    <!-- header头部模块制作 end -->

    <div class="qbspfl">
        <div class="qbfl">
            <a href="./mi.html">首页</a> / 全部商品分类
        </div>
    </div>
    <div class="classification">
        <div class="class">
            分类：
            <span>手环</span>
            <span>手机</span>
            <span>小米电视</span>
            <span>家电</span>
            <span>出行</span>
            <span>智能</span>
            <span>电源配件</span>
            <span>儿童</span>
            <span>耳机</span>

        </div>
    </div>

    <div class="sort">
        <a href="" class="hover_">综合</a>
        <span href="" class="asc">价格<i class="iconfont icon-jiantou_xiangshang"></i></span>
        <span href="" class="desc">价格<i class="iconfont icon-jiantou_xiangxia"></i></span>
        <span class="prev dis">上一页</span>
        <span class="pageAll"></span>
        <span class="next">下一页</span>
    </div>

    <div class="list_mi">

        <!-- <div class="goods_item">
            <img src="./images/pc_1.jpg" alt="">
            <h2>表土很好的解释</h2>
            <p>888元</p>
            <button>加入购物车</button>
        </div> -->

    </div>
    <footer class="footer w">
        <div class="sales">
            <a href="#"><i></i>预约维修服务</a>
            <a href="#"><i></i>7天无理由退货</a>
            <a href="#"><i></i>15天免费换货</a>
            <a href="#"><i></i>满150元包邮</a>
            <a href="#"><i></i>520家售后网点</a>
        </div>
        <div class="dibu">
            <div class="d_nav l">
                <ul>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                    <li>
                        <a href="#" class="title">帮助中心</a>
                        <a href="#">账户管理</a>
                        <a href="#">购物指南</a>
                        <a href="#">订单操作</a>
                    </li>
                </ul>
            </div>
            <div class="tel l">
                <p>400-100-5678</p>
                <p>周一至周五8:00-16:00</p>
                <p>(仅收市话费)</p>
                <span><i></i>小时在线客服</span>
            </div>
        </div>
    </footer>
    <div class="copyright">
        <div class="copy w">
            <div class="copy_logo l clearfix">
                <img src="./images/logo-mi2.png" alt="">
            </div>
            <div class="copy_nav l clearfix">
                <a href="#">小米商城</a><span class="seb">|</span>
                <a href="#">MIUI</a><span class="seb">|</span>
                <a href="#">米家</a><span class="seb">|</span>
                <a href="#">米聊</a><span class="seb">|</span>
                <a href="#">多看</a><span class="seb">|</span>
                <a href="#">游戏</a><span class="seb">|</span>
                <a href="#">政企服务</a><span class="seb">|</span>
                <a href="#">小米天猫店</a><span class="seb">|</span>
                <a href="#">小米集团隐私政策</a><span class="seb">|</span>
                <a href="#">小米公司儿童信息保护规则</a><span class="seb">|</span>
                <a href="#">小米商城用户协议</a><span class="seb">|</span>
                <a href="#">问题反馈</a>
                <span class="seb"> |</span>
                <a href="#">Select Location</a>
                <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号<br>
                    （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br>
                    增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证<br>
                    违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>

            </div>
        </div>
        <p class="copy_p">探索黑科技,小米为发烧而生!</p>

    </div>
    <!-- 侧边导航 -->
    <div class="c_nav_f">
        <a href="">
            <i class="iconfont icon-gerenzhongxin"></i>
            <span>个人中心</span>
        </a>
        <a href="./list.html">
            <i class="iconfont icon-shangpin"></i>
            <span>全部商品</span>
        </a>
        <a href="./cart.html">
            <i class="iconfont icon-iconfonticonfontcart"></i>
            <span>购物车</span>
        </a>
        <a href="./login.html">
            <i class="iconfont icon-denglu"></i>
            <span>登录/注册</span>
        </a>
    </div>

</body>

<script src="./js/tool_ajax.js"></script>
<script src="./js/api.js"></script>
<script>
    // 判断用户是否登录

    const user = localStorage.getItem('login_user');
    console.log(user);

    // if (user) {
    //     $('.ydyh').innerHTML=user;
    //     $('.qdl').style.display="none"
    // }
    // 关键字可以为空
    let kw = '';

    // 排序的字段
    // let sortName = 'id'

    // 排序的方法  asc / desc
    let sortType = '';
    let page = 1;
    let showSize = 16;
    let pageTotal;
    let sortName = ''; //手机 电视

    async function pageload() {
        const res = await goodList({
            page,
            showSize,
            kw,
            showSize,
            sortName,
            sortType

        })
        getDate(res)
    }
    pageload()

    // console.log($('.serch_btn'));



    //搜索
    $('.serch_btn').onclick = async function () {
        kw = $('.serch_con').value;
        page = 1;
        type = '';
        showSize = 12;
        sortName = '';
        sortType = '';
        $('.next').classList.remove('dis')
        // const res = await goodList({
        //     kw,
        //     page,
        //     showSize,
        //     sortType
        // })
        // console.log(res);
        // getDate(res)
        pageload()
    }

    // // 升序
    $('.asc').onclick = async function () {
        // const res = await goodList({
        //     kw,
        //     page,
        //     showSize,
        //     sortType: "asc",
        //     sortName
        // })

        // getDate(res)
        kw = '';
        page = 1;
        sortType = 'asc';
        $('.next').classList.remove('dis')
        pageload()

    }


    // 降序
    $('.desc').onclick = async function () {
        // const res = await goodList({
        //     kw,
        //     page,
        //     showSize,
        //     sortType: "desc",
        //     sortName
        // })

        // getDate(res)
        kw = '';
        page = 1;
        sortType = 'desc';
        $('.next').classList.remove('dis')
        pageload()
    }

    //分类
    $('.class').onclick = async function (e) {
        const target = e.target
        if (target.tagName === 'SPAN') {
            page = 1;
            sortName = target.innerHTML;
            $('.next').classList.remove('dis')

            pageload()
            // const res = await goodList({
            //     kw,
            //     page,
            //     showSize,
            //     sortType: "desc",
            //     sortName
            // })
            // getDate(res)
        }
    }


    //上翻页
    $('.prev').onclick = async function () {
        if (!this.className.includes('dis')) {
            page--;
            showSize,
            sortType = "asc";
            sortName;
            kw
            // const res = await goodList({
            //     page,
            //     showSize,
            //     sortType: "asc",
            //     sortName,
            //     kw
            // })
            pageload()
            // getDate(res)

            if (this.nextElementSibling.nextElementSibling.className.includes('dis')) {
                this.nextElementSibling.nextElementSibling.classList.remove('dis')
            }
            if (page === 1) {
                this.classList.add('dis')
            }
        }
    }

    //下翻页
    $('.next').onclick = async function () {
        if (!this.className.includes('dis')) {
            page++;
            showSize;
            sortType = "asc";
            sortName;
            kw
            // const res = await goodList({
            //     page,
            //     showSize,
            //     sortType: "asc",
            //     sortName,
            //     kw
            // })

            // getDate(res)
            pageload()

            if (this.previousElementSibling.previousElementSibling.className.includes('dis')) {
                this.previousElementSibling.previousElementSibling.classList.remove('dis')
            }
            if (page === pageTotal) {
                this.classList.add('dis')
            }
        }
    }


    //加入购物车
    $('.list_mi').onclick = async function (e) {
        const target = e.target
        if (target.tagName === 'BUTTON') {
            if (user) {
                const goods_id = target.parentNode.getAttribute('data-id')
                const goods_price = target.parentNode.getAttribute('data-price')
                console.log(goods_id, goods_price);

                const res = await addToCart({
                    username: user,
                    goods_id,
                    num: 1

                })
                console.log(res);
                const {
                    status,
                    msg,
                    data
                } = res
                if (status) {
                    alert("成功加入购物车");
                } else {
                    alert(msg);
                }


                // getDate(res)
            } else {
                alert("您还没有登录")
                location.href = './login.html'
            }
        }
    }




    async function getDate(res = '') {
        const {
            status,
            msg,
            data,
            pageAll
        } = res
        // console.log(res);


        if (status) {
            let str = '';
            data.forEach(v => {
                str += `
                <a href="../小米/detail.html?=${v.id}">
                <div class="goods_item" data-id="${v.id}" data-price="${v.price}">
            <img src="${v.img}" alt="">
            <h2>${v.title}</h2>
            <p>${v.price}元</p>
            <button><i class="iconfont icon-gouwucheman"></i></button>
        </div>
        </a>
            `
            })
            $('.list_mi').innerHTML = str;

            pageTotal = Math.ceil(pageAll / showSize);

            if (pageTotal == 1) {
                $('.next').classList.add('dis')
            }
            $('.pageAll').innerHTML = page + '/' + pageTotal

        } else {
            alert(msg)
        }
    }
</script>

</html>